<template>
    <div class="container mt-2">

        <h3>账号注册</h3>
        <hr>
        <el-form ref="regForm" :rules="rules" @submit.prevent="submit" size="large" :model="formData"
            label-position="top" label-width="auto">
            <el-form-item prop="username" label="账号">
                <el-input v-model="formData.username" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码">
                <el-input v-model="formData.password" type="password" placeholder="请输入账号密码"></el-input>
            </el-form-item>
            <el-form-item prop="phone" label="手机号">
                <el-input v-model="formData.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item prop="email" label="电子邮箱">
                <el-input v-model="formData.email" placeholder="请输入电子邮箱"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button native-type="submit" type="primary" plain style="width:100%;">立即注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { ref, useTemplateRef } from 'vue'
import { useRouter } from 'vue-router'
import http from '@/utils/http'
import { ElMessage } from 'element-plus'
const regFormRef = useTemplateRef('regForm')
const router = useRouter()
const formData = ref({ username: '', phone: '', email: '', password: '' })
const rules = {
    username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入账号密码', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
    email: [{ required: true, message: '请输入电子邮箱', trigger: 'blur' }],
}
const submit = () => {
    regFormRef.value.validate(async valid => {
        if (valid) {
            const result = await http.post('/api/user/reg/', { ...formData.value })
            if (result.status == 201) {
                ElMessage.success('账号注册成功')
                router.push('/login')
            }
        }
    })

}
</script>